<!--
    group: 系统设置
    name: 系统设置----修改密码
    url: /setting/changePassword
-->
<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="修改登录密码">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"  class="password-retrieval-form" style="min-width: 600px;max-width: 800px;">
          <div class="input-info">
            <a-form-model-item label="手机号" :colon="false">
              <span style="color: #333333">{{ phone }}</span>
            </a-form-model-item>
            <a-form-model-item label="输入当前登录密码" prop="loginOldPwd" :colon="false">
              <a-input-password v-model="form.loginOldPwd" placeholder="请输入" allow-clear :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
            </a-form-model-item>
            <a-form-model-item label="输入新密码" prop="loginPwd" :colon="false">
              <a-input-password v-model="form.loginPwd" placeholder="请输入" allow-clear :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
            </a-form-model-item>
            <a-form-model-item label="再次输入新密码" prop="loginPwdOk" :colon="false">
              <a-input-password v-model="form.loginPwdOk"  placeholder="请输入" allow-clear :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
            </a-form-model-item>
            <a-form-model-item label="手机验证码" prop="captcha" :colon="false">
              <a-input v-model="form.captcha" autocomplete="off" placeholder="输入验证码" type="text" />
              <a-button type="primary" @click="send" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 4 }">
              <a-button type="primary" @click="addCategory">保存</a-button>
            </a-form-model-item>
            <!-- <a-form-model-item :wrapper-col="{ span: 12, offset: 4 }">
              <p class="tips" v-if="isShow">您已完成登录密码的设置，如忘记密码，可在此页面进行修改</p>
            </a-form-model-item> -->

          </div>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { changeLoginPwd,getSendSMSByLogin,LoginUserInfo } from '@/api/setting'
import { mapActions } from 'vuex'
import { numberFilter,encryptIt } from '@/utils/util'
export default {
  name: 'changePassword',
  data(){
    return {
      my:null,
      myTest:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs7eVl3hduxnpyKhwI27seelA6cfr0ghTFVsMuaFW68KDa0Xv3NANEQ1YjWYVM/AUllHSDq0ORdIGm2suKCsmGuLnDK1TK7LbOZLgvkDz+Ft+06Y0ZzjILzl0SUtawE+fD6dpebAeD+dOAcl9EzU536ASLx0rsziOZIwcN3aWx5wIDAQAB',
      myPro:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDpIyqMNYBRzfwVhL+P6jav7rGkNZQ0nu+7G7qe1g7mThM9D6Dc717sN1ATDgPxJzgI+NEQ+wx2B1HpUcs4pigyXbnL96qgHrsTe6ZX9YyicsaLz5FM7nujypfVAkfr/VQLEA8z9L7XsAh+Hm6g0WCdSPqdWHY0lS0ImOXth3PgjwIDAQAB',
      labelCol: { span: 4 },
      wrapperCol: { span: 10 },
      form:{},
      rules: {
        loginOldPwd: [
          { required: true, message: '输入当前登录密码', trigger: 'blur' },
        ],
        loginPwd: [
          { required: true, message: '输入新登录密码', trigger: 'blur' },
          { validator: this.validateNewPassword, trigger: "change" },
        ],
        loginPwdOk: [
          { required: true, message: '再次输入新登录密码', trigger: 'blur' },
          { validator: this.validateNewPassword2, trigger: "change" },
        ],
        captcha: [{ required: true, message: '输入验证码', trigger: 'blur' }],
      },
      isShow: false,
      codeText: '发送验证码',
      disabledCodeBtn: false,
      phone: null,

      inputType:'text',
      autoCom: 'off',
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods:{
    ...mapActions(["Logout"]),
    //表单验证
    validateNewPassword(rule, value, callback){
      //密码
      let passwordReg = /^(?=.*[a-zA-Z]).{9,15}$/;
      if (value){
        if (!passwordReg.test(value)){
          callback(new Error("密码由9~15位数字和字母组成!"));
        }else{
          if (value === this.form.loginOldPwd) {
            callback(new Error("新密码不能与旧密码相同"));
          } else {
            callback();
          }
        }
      }
    },
    validateNewPassword2(rule, value, callback){
      if (value !== this.form.loginPwd) {
        callback(new Error("与新密码不一致"));
      } else {
        callback();
      }
    },
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    //发送验证码
    send(){
      //请求接口
      getSendSMSByLogin().then(res => {
        if (res.success) {
          this.$message.success('短信发送成功！')
          this.countDown(60);
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //保存
    addCategory(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let { loginOldPwd,loginPwd,loginPwdOk,captcha } = this.form;
          let params = {
            loginOldPwd,
            loginPwd,
            loginPwdOk,
            captcha
          }
          if(process.env.VUE_APP_MY_STR == 'test'){
            this.my = this.myTest
          }else if(process.env.VUE_APP_MY_STR == 'pro'){
            this.my = this.myPro
          }
          params.loginOldPwd = encryptIt(this.my,params.loginOldPwd)
          params.loginPwd = encryptIt(this.my,params.loginPwd)
          params.loginPwdOk = encryptIt(this.my,params.loginPwdOk)
          changeLoginPwd(params).then(res => {
            if (res.success){
              this.$message.success('修改密码成功,将在3秒后返回登录页面')
              // this.isShow = true;
              const secounds = 3;
              let num = 0
              let that = this;
              const timer = setInterval(() => {
                if(num < secounds) {
                  num++
                }else {
                  clearInterval(timer)
                  that.setLayOut()
                }
              }, 1000)

            }else{
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    //退出登录
    setLayOut(){
      let that = this;
      that.Logout({}).then(() => {
        that.$router.push({ path: '/user/login' });
        window.location.replace( '/');

      }).catch(err => {
        that.$message.error({
          title: '错误',
          description: err.message
        })
      })
    },
    getUserInfo(){
      LoginUserInfo().then(res => {
        if (res.success) {
          let data = res.result;
          if (data){
            this.phone = numberFilter(data.phone,'mobileCard');
          }
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送验证码(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
  }

}
</script>

<style scoped lang="less">
.breadcrumb{
  background:#fff;
  height: 60px;
  line-height: 30px;
  color: #101010;
  font-weight: bold;
}
.tips{
  color: #AEAEB2;
  font-size: 14px;
  white-space: nowrap;
}


.password-retrieval-form{
  width: 100%;
  background: #FFFFFF;
  margin-top: 20px;
  text-align: left;
  .title{
    text-indent: 4em;
    padding: 20px 0;
  }
}

.ant-input{
  width: 40%;
}
/deep/.ant-tabs{
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
}
</style>

